<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="动态参数" name="many">
                <el-button type="primary" class="btn">添加动态参数</el-button>
                <el-table fit ref="toggle" stripe :data="attrDataArr" style="width: 100%" border>
                    <el-table-column type="expand">
                        <template v-slot:default="scoped">
                            <div :key="tag" v-for="tag in scoped.row.dynamicTags">
                                <!-- NOTE 解决数据中有空字符串 导致渲染一个空标签的问题 -->
                                <el-tag v-if="tag == '' ? false : true" closable :disable-transitions="false"
                                    @close="handleClose(tag, scoped.$index)">
                                    {{ tag }}
                                </el-tag>
                            </div>
                            <el-input v-if="inputVisible && scoped.$index == index" class="input-new-tag"
                                v-model="inputValue" ref="saveTagInput" size="small"
                                @keyup.enter.native="handleInputConfirm(scoped)" @blur="handleInputConfirm(scoped)">
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput(scoped)">+ New Tag
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column type="index">
                    </el-table-column>
                    <el-table-column label="参数名称" prop="attr_name">
                    </el-table-column>
                    <el-table-column label="操作" width="300">
                        <template v-slot:default="scoped">
                            <div>
                                <el-button type="primary" icon="el-icon-edit" @click="editAttr(scoped.row)">编辑
                                </el-button>
                                <el-button type="danger" icon="el-icon-delete" @click="removeAttr(scoped.row)">删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="静态属性" name="only">
                <el-button type="primary" class="btn">添加静态参数</el-button>
                <el-table fit ref="toggle" stripe :data="attrDataArr" style="width: 100%" border>
                    <el-table-column type="expand">
                        <template v-slot:default="scoped">
                            <div :key="tag" v-for="tag in scoped.row.dynamicTags">
                                <el-tag v-if="tag == '' ? false : true" closable :disable-transitions="false"
                                    @close="handleClose(tag, scoped.$index)">
                                    {{ tag }}
                                </el-tag>
                            </div>
                            <el-input class="input-new-tag" v-if="inputVisible && scoped.$index == index"
                                v-model="inputValue" ref="saveTagInput" size="small"
                                @keyup.enter.native="handleInputConfirm(scoped)" @blur="handleInputConfirm(scoped)">
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput(scoped)">+ New Tag
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column type="index">
                    </el-table-column>
                    <el-table-column label="参数名称" prop="attr_name">
                    </el-table-column>
                    <el-table-column label="操作" width="300">
                        <template v-slot:default="scoped">
                            <div>
                                <el-button type="primary" icon="el-icon-edit" @click="editAttr(scoped.row)">编辑
                                </el-button>
                                <el-button type="danger" icon="el-icon-delete" @click="removeAttr(scoped.row)">删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!-- NOTE对话框 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="ruleForm">
                <el-form-item label="参数：" :label-width="formLabelWidth" prop="attr_name">
                    <el-input v-model="form.attr_name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: "TabView",
    props: ['tableData'],
    data() {
        return {
            attrDataArr: [],
            activeName: 'many',
            value: [],
            inputVisible: false,
            inputValue: '',
            form: {
                attr_name: ''
            },
            ruleForm: {
                attr_name: [
                    { required: true, message: '请输入参数', trigger: 'blur' }
                ],
            },
            formLabelWidth: '100px',
            dialogFormVisible: false,
            // TODO 所有的input输入框都是共用inputVisible的 为此添加一个条件来控制显隐
            index: -1
        }
    },
    watch: {
        tableData(val) {
            if (val.length > 0) {
                // TODO 给数组添加属性时，用$set 解决新添加的数据没有getter和setter4
                // INFO 解决了视图不更新的问题
                val.map(ele => {
                    this.$set(ele, 'dynamicTags', ele.attr_vals.split(','));
                })

                this.attrDataArr = val;
            } else {
                this.$message({
                    showClose: true,
                    message: '暂无参数'
                });
            }

        }
    },
    methods: {
        // TODO 打开删除弹框
        removeAttr(val) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('removeAttr', val)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // TODO 打开对话框
        editAttr(scoped) {
            this.dialogFormVisible = true;
            this.form.attr_name = scoped.attr_name;
            this.attrObj = scoped;
        },
        // TODO 确定编辑 
        edit() {
            this.attrObj.attr_name = this.form.attr_name;
            this.$emit('editAttr', this.attrObj);
            this.dialogFormVisible = false;
        },
        // INFO 获取分类参数
        handleClick() {
            this.$emit('getAttr', this.activeName)
        },
        // INFO 删除标签
        handleClose(tag, index) {
            this.attrDataArr[index].dynamicTags.splice(this.attrDataArr[index].dynamicTags.indexOf(tag), 1);
        },
        // INFO 显示输入框
        showInput({ $index }) {
            this.inputVisible = true;
            this.index = $index;
            this.$nextTick(() => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        // INFO 失去焦点后添加标签
        handleInputConfirm({ $index }) {
            let inputValue = this.inputValue;
            if (inputValue) {
                // TODO 如果有值，再进行去重处理
                const flag = this.attrDataArr[$index].dynamicTags.some(ele => {
                    return inputValue == ele
                });
                // INFO 用some去重 如果找到一个相同的值，那么返回true，取反进行条件语句
                if (!flag) {
                    this.attrDataArr[$index].dynamicTags.push(inputValue);
                } else {
                    this.$message.error('已有相同内容');
                    return;
                }

            }
            this.inputVisible = false;
            this.inputValue = '';
        }
    }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.btn {
    margin-bottom: 10px;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}

.el-tag {
    margin-left: 10px;
    margin-bottom: 10px;
}

// STYLE 解决div的块元素独占一行的问题
.el-table td.el-table__cell div {
    display: inline-block;
}

:deeo(.input-new-tag) {
    margin-left: 10px !important;
    height: 32px !important;
    line-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

:deep(.input-new-tag) {
    vertical-align: baseline !important;
}
</style>